<template>
    <div class="model-form">
        <el-page-header @back="goBack" content="商家素材详情">
        </el-page-header>

        <el-row :gutter="10" v-for="item in catalogs">

            <el-col :gutter="10" :span="24">
                <div class="h1">{{ item.name }}</div>
            </el-col>
            <el-col :gutter="20" :span="4" v-for="video in item.materials">
                <el-card :body-style="{ padding: '5px' }">
                    <sc-video :src="video.video"></sc-video>
                </el-card>
            </el-col>
            <el-col :gutter="20" :span="4">
                <el-upload :data-catalog="item.id"
                           @click="selectCatalog(item.id)"
                           :accept="'image/*,video/*'"
                           class="avatar-uploader"
                           action="https://model.nbsaas.com/storage/upload.htm"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload"
                >
                    <el-icon class="avatar-uploader-icon">
                        <Plus/>
                    </el-icon>
                </el-upload>
            </el-col>

        </el-row>
    </div>
</template>

<script>
import common from "@/mixins/common.js";
import scVideo from '@/components/scVideo/index.vue'
import {ElLoading} from 'element-plus'

export default {
    name: "shopmaterial_view",
    mixins: [common],
    components: {
        scVideo
    },
    data() {
        return {
            viewModel: {},
            activeIndex: "1",
            catalogs: [],
            loading: {},
            curCatalog: ""
        }
    },
    async mounted() {
        this.shop= this.$route.query.id;
        this.loadData().then();
    },
    methods: {

       async loadData(){
           let self=this;
            let data = {};
            data.fetch = 1;
            data.size = 500;
            data.sortMethod = "desc";
            data.sortField = "addDate";
            data.shop =  this.shop;
            let res = await this.$http.form("/tenantRest/shopmaterial/listData.htm", data);
            if (res.code === 200) {


                this.catalogs = res.data;

                console.info(this.catalogs)

            }
        },

        selectCatalog(event) {
            console.info(event)
            this.curCatalog = event;
        },
        async handleAvatarSuccess(event) {

            let params = {};
            params.shop = this.shop;
            params.catalog = this.curCatalog;
            params.video=event.url;
            let temp = await this.$http.form("/tenantRest/shopmaterial/create.htm", params);
           await this.loadData();
            this.loading.close();


        },
        beforeAvatarUpload() {
            this.loading = ElLoading.service({
                lock: true,
                text: '视频上传中',
                background: 'rgba(0, 0, 0, 0.7)',
            })
        }
    },
}
</script>

<style scoped>
.h1 {

    margin: 10px;
}


.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

</style>
